<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text"> 我的订单 </view>
    </view>

    <u-tabs
      class="tabs"
      :list="list1"
      @click="click"
      lineWidth="35"
      :scrollable="false"
      :activeStyle="{
        color: '#EEEEEE',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
        'font-size': '32rpx',
      }"
      lineColor="#55B877"
      :inactiveStyle="{
        color: '#ADADAD',
        transform: 'scale(1)',
        'font-size': '32rpx',
      }"
    ></u-tabs>

    <scroll-view
      scroll-y="true"
      @scroll="scroll"
      @scrolltolower="scrolltolower"
    >
      <view
        class="box"
        :style="{
          height: scrollHeight + 'px',
        }"
      >
        <view
          class="box_item"
          v-for="(item, index) in list"
          :key="index"
          @click="goDetail(item)"
        >
          <view class="box_item_top">
            <view class="box_item_top_left">
              <view class="box_item_top_left_title">华胥星球</view>
              <view
                class="box_item_top_left_close"
                v-show="item.pay_status == '未付款'"
                >{{ item.msg }}</view
              >
            </view>
            <view class="box_item_top_right">{{ item.pay_status }}</view>
          </view>
          <view class="box_item_content">
            <image
              class="box_item_content_img"
              :src="item.file_url"
              mode=""
            ></image>
            <view class="box_item_content_right">
              <view class="box_item_content_right_title">{{
                item.buy_name
              }}</view>
              <view class="box_item_content_right_num"
                >数量：{{ item.buy_number }}</view
              >
              <view class="box_item_content_right_price">
                <view class="box_item_content_right_price_title">合计</view>
                <view class="box_item_content_right_price_num"
                  >￥{{ item.total_price }}</view
                >
              </view>
            </view>
          </view>
          <view class="box_item_bottom">
            <view
              class="box_item_bottom_btn1"
              v-show="item.pay_status == '待支付'"
              @click.stop="cancel(item.order_id)"
              >取消订单</view
            >
            <view
              class="box_item_bottom_btn1"
              v-show="item.pay_status != '待支付'"
              >查看详情</view
            >
            <view
              class="box_item_bottom_btn2"
              v-show="item.pay_status == '待支付'"
              @click.stop="payment(item)"
              >继续支付</view
            >
          </view>
        </view>
        <view style="height:50rpx" v-if="list && list.length > 0"></view>
        <view class="empty_view" v-if="list && list.length == 0">
          <image
            class="item_left_clickable"
            src="../../static/images/my/kong.png"
            mode=""
          ></image>
          <view>当前没有相关数据，请查看其他分类或功能~</view>
        </view>
      </view>
    </scroll-view>


    <floatingBall></floatingBall>
  </view>
</template>
  
  <script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      currentIndex: 0,
      list1: [
        {
          name: "全部",
        },
        {
          name: "待付款",
        },
        {
          name: "已完成",
        },
      ],
      list: [],
      scrollHeight: 0,
      page: 1,
      last_page: 0,
    };
  },
  onShow: function () {
    this.list = []
    this.page = 1
    if (this.currentIndex == 0) {
      // 全部
      this.getList(-1);
    } else if (this.currentIndex == 1) {
      // 待付款
      this.getList(0);
    } else if (this.currentIndex == 2) {
      // 已完成
      this.getList(1);
    }
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    const windowHeihgt = statusBarHeight.windowHeight;
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".tabs").fields({
        size: true,
      });

      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeight = windowHeihgt - sum - 52;
      });
    });
    // this.getList(-1);
  },
  methods: {
    scroll() {},
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++;
        if (this.currentIndex == 0) {
          // 全部
          this.getList(-1);
        } else if (this.currentIndex == 1) {
          // 待付款
          this.getList(0);
        } else if (this.currentIndex == 2) {
          // 已完成
          this.getList(1);
        }
      }
      console.log("触发");
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    click(e) {
      this.page = 1
      this.list = []
      console.log("1111", e);
      this.currentIndex = e.index;
      if (e.index == 0) {
        // 全部
        this.getList(-1);
      } else if (e.index == 1) {
        // 待付款
        this.getList(0);
      } else if (e.index == 2) {
        // 已完成
        this.getList(1);
      }
    },
    goDetail(value) {
      uni.navigateTo({
        url: `/pages/integral/indentDetail?orderId=${value.order_id}`,
      });
    },
    getList(value) {
      this.$http
        .orderList({ pay_status: value, page: this.page })
        .then((res) => {
          this.list = this.list.concat(res.data.list.data);
          this.last_page = res.data.list.last_page;
          console.log(this.list, "我的订单");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    cancel(id) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定取消订单吗?",
        confirmText: "立即清除",
        success(res) {
          if (res.confirm) {
            // //重新获取并显示清除后的缓存大小
            that.$http
              .orderCancel({ orderId: id })
              .then((res) => {
                console.log(res, "取消订单");
                if (that.currentIndex == 0) {
                  // 全部
                  that.getList(-1);
                } else if (that.currentIndex == 1) {
                  // 待付款
                  that.getList(0);
                } else if (that.currentIndex == 2) {
                  // 已完成
                  that.getList(1);
                }
                uni.$u.toast(res.message);
              })
              .catch((error) => {
                uni.$u.toast(error);
              });
          }
        },
      });
    },
    payment(item) {
      // console.log(item,'单项')
      // console.log(JSON.stringify(item),999999999999)
      uni.navigateTo({
        url: `/pages/integral/payment?price=${
          item.pay_price
        }&from=myDingdan&id=${item.order_id}&detail=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  position: fixed;
  box-sizing: border-box;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  .slot-content {
    view {
      display: flex;
      justify-content: center;
    }
  }
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}

.box {
  padding: 30rpx;
  .box_item {
    background: rgba(39, 39, 39, 0.5);
    border-radius: 24rpx;
    padding: 22rpx 30rpx;
    margin-bottom: 32rpx;
    .box_item_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .box_item_top_left {
        display: flex;
        align-items: center;
        .box_item_top_left_title {
          font-size: 28rpx;
          color: #adadad;
        }
        .box_item_top_left_close {
          margin-left: 24rpx;
          color: #ee6060;
        }
      }
      .box_item_top_right {
        font-size: 28rpx;
        color: #55b877;
      }
    }
    .box_item_content {
      margin-top: 22rpx;
      display: flex;
      align-items: center;
      width: 100%;
      .box_item_content_img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 24rpx;
      }
      .box_item_content_right {
        margin-left: 30rpx;
        flex: 1;
        .box_item_content_right_title {
          font-size: 30rpx;
          color: #eeeeee;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .box_item_content_right_num {
          margin-top: 16rpx;
          font-size: 28rpx;
          color: #adadad;
        }
        .box_item_content_right_price {
          margin-top: 36rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 28rpx;
          .box_item_content_right_price_title {
            color: #eeeeee;
          }
          .box_item_content_right_price_num {
            color: #ff8a4c;
          }
        }
      }
    }
    .box_item_bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 64rpx;
      .box_item_bottom_btn1 {
        width: 192rpx;
        height: 70rpx;
        background: rgba(39, 39, 39, 0.5);
        border-radius: 35rpx 35rpx 35rpx 35rpx;
        border: 1rpx solid #adadad;
        text-align: center;
        line-height: 70rpx;
        color: #eeeeee;
        margin-left: 16rpx;
        font-size: 28rpx;
      }
      .box_item_bottom_btn2 {
        width: 192rpx;
        height: 70rpx;
        background: #55b877;
        border-radius: 35rpx;
        text-align: center;
        line-height: 70rpx;
        color: #eeeeee;
        font-size: 28rpx;
        margin-left: 16rpx;
      }
    }
  }
}

.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>